<template>
  <div>
    <el-button type="primary" plain icon="plus" @click="dialogVisible = true">
      授权员工
    </el-button>
    <el-dialog
      title="授权员工"
      v-model="dialogVisible"
      width="70%"
      style="border-radius: 10px; padding: 5px 10px"
      @open="getUserListA"
      @closed="closed"
    >
      <el-table
        :data="limit()"
        v-loading="loading"
        ref="tableRef"
        element-loading-text="加载中..."
        :row-key="(row) => row.id"
        border
        @selection-change="selectChange"
      >
        <el-table-column type="selection" align="center" />

        <el-table-column prop="num" label="工号" align="center" />

        <el-table-column prop="name" label="姓名" width="150" align="center" />

        <el-table-column label="部门" width="300" align="center">
          <template #default="{ row }">
            <el-text v-for="(item, index) in row.deptNames" :key="index">
              {{ item }}
              <br />
            </el-text>
          </template>
        </el-table-column>

        <el-table-column label="岗位" width="180" align="center">
          <template #default="{ row }">
            <el-text v-for="(item, index) in row.postName" :key="index">
              {{ item }}
              <br />
            </el-text>
          </template>
        </el-table-column>

        <el-table-column
          prop="roleName"
          label="职务名称"
          width="180"
          align="center"
        />
      </el-table>
      <!--分页组件-->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        :pageSizes="[10, 20, 30, 40]"
        @pagination="limit()"
      />
      <div class="footer">
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getEmpsByNumOrName } from "@/service/api/user";
import { accreditUser } from "@/service/api/role";
import { ElMessage } from "element-plus";

const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const selection = ref([]);

const emit = defineEmits(["getAccreditEmps"]);

const props = defineProps({
  roleId: {
    type: Number,
    default: null,
  },
});

const commitForm = ref({
  roleId: null,
  userIds: [],
});

/**
 * 获取用户列表
 */
const getUserListA = async () => {
  const data = await getEmpsByNumOrName();
  if (data != null) {
    total.value = data.length;
    tableData.value = data;
  }
};

const pageNum = ref(1);
const pageSize = ref(10);

//前端限制分页（tableData为当前展示页表格）
const limit = () => {
  return tableData.value.filter(
    (item, index) =>
      index < pageNum.value * pageSize.value &&
      index >= pageSize.value * (pageNum.value - 1)
  );
};

/**
 * 勾选表格CheckBox的回调函数-获取勾选的数组
 */
const selectChange = (select) => {
  selection.value = select;
};

//提交
const submit = async () => {
  if (selection.value.length === 0) {
    ElMessage.error("无法提交，你未选择用户");
  } else {
    const ids = [];
    selection.value.forEach((item) => {
      ids.push(item.id);
    });
    commitForm.value.roleId = props.roleId;
    commitForm.value.userIds = ids;
    await accreditUser(commitForm.value);
    dialogVisible.value = false;
    emit("getAccreditEmps");
  }
};
</script>
<style lang="scss">
.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
